<template>
  <div class="img-card">
    <img :src="'/api/common/download?name='+data.photo" alt="头像">
    <div class="card-main">
      <div>{{ data.tit }}</div>
      <div class="card-three">
        <div>{{ data.age }}</div>
        <div>{{ data.sex }}</div>
        <div>{{ data.job }}</div>
      </div>
      <div class="item-1">{{ data.info1 }}</div>
      <div class="item-2">{{ data.info2 }}
        <el-button
            plain
            type="danger"
            size="mini"
            class="collect-button"
            v-if="showCollectButton"
            @click="collect">
          {{'收藏' }}{{data.collectionNum}}
        </el-button>
      </div>

      <div>
        <button type="button" @click="$router.push(data.link)">详情</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {collectDoctor, getCollectDoctor} from "@/request/ClientApi"
import {ElMessage} from "element-plus";
import {Res} from "@/request/Res";
import {reqFourDoctor} from "@/request/DoctorApi";
const props = defineProps<{
  type: "primary" | "success"
  data: CardData
  showCollectButton: boolean
}>()
const emit = defineEmits(['update-collection'])
const collect = async () => {
/*
let res1 = await getCollectDoctor();
  console.log('收藏数量信息', res1)
*/

/*
for (let item of res1) {
  if (item !== null && item.collectionNum !== undefined) {
    collectionNum = item.collectionNum;
    break; // 找到第一个不为 null 的对象后，跳出循环
  }
}

if (collectionNum !== null) {
  console.log('收藏数量', collectionNum);
} else {
  console.log('收藏数量信息不可用');
}

  console.log('收藏',props.data.doctorId)

*/
  let a = props.data.docterId

  let res: any =  await collectDoctor(a)
  if (res.code === 1) {
    window.location.reload()
    emit('update-collection', props.data.collectionNum + 1) // 触发事件
    ElMessage.success('收藏成功!',res.msg)
  }else {
    ElMessage.error('收藏失败',res.msg)
  }
}

const myColorTxt = ref<string>("#337ecc")
const myColorBor = ref<string>("#409EFF")
const myColorAct = ref<string>("#79bbff")
const myColorTit = ref<string>("#a0cfff")


if (props.type === "success") {
  myColorTxt.value = "#529b2e"
  myColorBor.value = "#67C23A"
  myColorAct.value = "#95d475"
  myColorTit.value = "#b3e19d"
}

export interface CardData {
  doctorId: number;
  photo: string;
  tit: string;
  age: string;
  sex: string;
  job: string;
  info1: string;
  info2: string;
  collectionNum: number;
  link: string;
}
</script>

<style lang="scss" scoped>
.img-card {
  $primary-color: #ff9ff3;  // 主粉色
  $secondary-color: #f368e0; // 次粉色
  $accent-color: #ff6b6b;   // 强调色
  $text-color: #5f27cd;     // 文字色
  $bg-color: #fff9ff;       // 背景色

  width: 100%; /* 改为百分比宽度 */
  max-width: 360px; /* 控制最大宽度 */
  height: auto; /* 高度自适应 */
  min-height: 200px; /* 最小高度保证一致性 */
  background: linear-gradient(135deg, $bg-color 0%, #ffe6f2 100%);
  display: flex;
  flex-direction: column; /* 改为垂直布局 */
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(255, 159, 243, 0.2);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 20px; /* 增加底部间距 */

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(255, 159, 243, 0.3);
  }

  img {
    width: 80px; /* 缩小头像 */
    height: 80px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    margin-bottom: 12px;
  }

  .card-main {
    width: 100%;
    text-align: center;

    > div {
      width: 100%;
      margin: 6px 0;
      line-height: 1.4;

      &:first-child {
        font-size: 16px;
        font-weight: bold;
        color: $text-color;
        padding-bottom: 8px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 30%;
          width: 40%;
          height: 2px;
          background: linear-gradient(to right, transparent, $primary-color, transparent);
        }
      }

      &:last-child {
        margin-top: 12px;
        button {
          background: white;
          color: $secondary-color;
          height: 32px;
          border: 2px solid $secondary-color;
          width: 80%;
          max-width: 120px;
          border-radius: 16px;
          font-weight: bold;
          transition: all 0.3s ease;
          cursor: pointer;
          font-size: 14px;

          &:hover {
            background: $secondary-color;
            color: white;
          }
        }
      }

      &.item-1 {
        color: $accent-color;
        font-size: 13px;
      }

      &.item-2 {
        color: #666;
        font-size: 12px;
      }
    }

    .card-three {
      display: flex;
      justify-content: space-around;
      font-size: 13px;
      color: $text-color;
      margin: 10px 0;

      div {
        padding: 0 5px;
        flex: 1;

        &:not(:last-child) {
          border-right: 1px solid rgba(243, 104, 224, 0.3);
        }
      }
    }
.collect-button {
  margin: 8px auto;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  // 基础样式
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #ff6b6b !important;
  color: #ff6b6b !important;

  // 悬停效果
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 107, 107, 0.2);
    background: #ff6b6b !important;
    color: white !important;

    .icon-heart::before {
      color: white;
    }
  }

  // 点击效果
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
  }

  // 添加心形图标
  .icon-heart {
    display: inline-block;
    margin-right: 4px;

    &::before {
      content: "❤";
      font-size: 12px;
      color: #ff6b6b;
      transition: all 0.3s ease;
    }
  }

  // 数字样式
  .collection-count {
    margin-left: 2px;
    font-weight: bold;
  }
}

    .el-button {
      margin: 8px auto;
      background: white;
      border-color: $accent-color;
      color: $accent-color;
      font-size: 12px;
      padding: 4px 8px;
    }
  }

  /* 响应式适配 */
  @media (min-width: 768px) {
    flex-direction: row; /* 大屏幕恢复水平布局 */
    height: 160px;
    padding: 12px;

    img {
      width: 100px;
      height: 100px;
      margin-bottom: 0;
      margin-right: 16px;
    }

    .card-main {
      text-align: left;

      .card-three {
        justify-content: flex-start;
        div {
          text-align: center;
        }
      }
    }
  }
}
</style>



